<template>
  <div class="Page">
    <!-- 获取图片的主色调 -->
    <p>获取图片的主色调</p>
    <div style="position: relative;width:50vw;height:200px">
      <canvas id="canvas" width="100px" height="100px" style="display: none;"></canvas>
      <div class="centre_img" id="grad" style="display: inline-block;width: 100%;height: 100%;"></div>
      <div style="width: 90%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
        <Carousel autoplay :after-change="handChange">
        <!-- <Carousel :after-change="handChange"> -->
          <div v-for="item in carousel_img" :key="item.id" style="margin: 15px;">
            <img :src="item.src" class="autoimg_size" alt="轮播图" style="width:80%">
          </div>
        </Carousel>
      </div>
    </div>
    <p>d</p>
    <div style="width:300px;height:300px">
      <div style="height: 100%;">
        <img style="height: 100%;" src="http://p1.music.126.net/TzMwwPWS6lONrPqOiOrZFw==/109951165693801980.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
// 走马灯 轮播图
import { Carousel } from 'ant-design-vue'

export default {
  name: 'Page',
  components: {
    Carousel
  },
  data () {
    return {
      carousel_img: [
        {
          src: 'http://p1.music.126.net/TzMwwPWS6lONrPqOiOrZFw==/109951165693801980.jpg',
          name: '2222',
          id: 1
        },
        {
          src: 'http://p1.music.126.net/PPNIYRASmBO4dWbfcQAGMA==/109951165692851959.jpg',
          name: '2222',
          id: 2
        },
        {
          src: 'http://p1.music.126.net/MKif1E9QlWkMmvHqcZTNtA==/109951165692653077.jpg',
          name: '2222',
          id: 3
        }
      ]
    }
  },
  created () {
  },
  mounted () {
    this.handChange(0)
  },
  methods: {
    handChange (index) {
      var color = document.getElementById('grad')
      const img = new Image()
      img.onload = function () {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        img.style.display = 'none'
        //  ImageData.data	类型为Uint8ClampedArray的一维数组，每四个数组元素代表了一个像素点的RGBA信息，每个元素数值介于0~255
        const imgData = (ctx.getImageData(0, 0, img.width, img.height)).data
        var b = '(' + imgData[0] + ',' + imgData[1] + ',' + imgData[2] + ',' + imgData[3] + ')'
        var c = '(' + imgData[4] + ',' + imgData[5] + ',' + imgData[6] + ',' + imgData[7] + ')'
        // var d = '(' + 255 + ',' + 255 + ',' + 255 + ',' + 0 + ')'
        // console.log(b, c, d, '============')
        // color.style.backgroundImage = 'linear-gradient( rgb' + b + ',rgb' + c + ',rgb' + d + ')';
        color.style.backgroundImage = 'linear-gradient( rgb' + b + ',rgb' + c + ')'
      }
      var imgSrc = this.carousel_img[index].src
      img.src = imgSrc
      img.crossOrigin = 'anonymous'
    }
  }
}
</script>
<style scoped lang="less">
.centre_img {
  // background-image: linear-gradient(#749bbc,#749bbc,hsla(0,0%,100%,0));
}
</style>
